<template>
  <el-dialog
      v-model="internalVisible"
      :title="profileData?.basicInfo?.name + ' 的基金画像'"
      width="1050px"
  >
    <div v-if="profileData" class="profile-container">
      <!-- 基本信息 -->
      <el-card shadow="hover" class="profile-card">
        <template #header><el-tag type="info">产品基本信息</el-tag></template>
        <el-descriptions :column="2" size="small" border>
          <el-descriptions-item label="基金名称">{{ profileData.basicInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="基金代码">{{ profileData.basicInfo.code }}</el-descriptions-item>
          <el-descriptions-item label="基金类型">{{ profileData.basicInfo.type }}</el-descriptions-item>
          <el-descriptions-item label="基金公司">{{ profileData.basicInfo.companyName }}</el-descriptions-item>
          <el-descriptions-item label="基金经理">{{ profileData.basicInfo.managerName }}</el-descriptions-item>
          <el-descriptions-item label="最新净值">
            {{ profileData.basicInfo.latestNav }}（{{ profileData.basicInfo.latestNavDate }}）
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 标签 -->
      <el-card shadow="hover" class="profile-card">
        <template #header><el-tag type="info">基金标签</el-tag></template>
        <div>
          <el-tag
              v-for="tag in profileData.tags"
              :key="tag"
              type="success"
              style="margin: 5px"
          >
            {{ tag }}
          </el-tag>
        </div>
      </el-card>

      <!-- 业绩表现 -->
      <el-card shadow="hover" class="profile-card">
        <template #header><el-tag type="success">业绩表现</el-tag></template>
        <el-descriptions :column="2" size="small" border>
          <el-descriptions-item label="年化收益率">
            {{ (profileData.performance.annualReturn * 100).toFixed(2) }}%
          </el-descriptions-item>
          <el-descriptions-item label="最大回撤">
            {{ (profileData.performance.maxDrawdown * 100).toFixed(2) }}%
          </el-descriptions-item>
          <el-descriptions-item label="夏普比率">
            {{ profileData.performance.sharpeRatio?.toFixed(2) }}
          </el-descriptions-item>
          <el-descriptions-item label="波动率">
            {{ profileData.performance.stddev?.toFixed(4) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 持仓分析 -->
      <el-card shadow="hover" class="profile-card">
        <template #header><el-tag type="warning">持仓分析</el-tag></template>
        <el-table :data="profileData.holdings" border size="small">
          <el-table-column prop="stockName" label="股票名称" />
          <el-table-column prop="holdingRatio" label="占比（%）">
            <template #default="scope">
              {{ (scope.row.holdingRatio * 100).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 公告 -->
      <el-card shadow="hover" class="profile-card">
        <template #header><el-tag type="primary">基金公告</el-tag></template>
        <p>{{ profileData.announcementContent }}</p>
      </el-card>
    </div>

    <template #footer>
      <el-button @click="internalVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, watch, ref } from 'vue'

// 接收 props
const props = defineProps({
  modelValue: Boolean,
  profileData: Object
})

// 定义 emits
const emit = defineEmits(['update:modelValue'])

// 本地 dialog 状态
const internalVisible = ref(props.modelValue)

// 同步 modelValue -> internalVisible
watch(() => props.modelValue, (val) => {
  internalVisible.value = val
})

// 同步 internalVisible -> modelValue
watch(internalVisible, (val) => {
  emit('update:modelValue', val)
})
</script>

<style scoped>
.profile-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}
.profile-card {
  padding: 10px;
}
</style>
